import React from 'react'
import './index.less'
import Square from '../Square'

export default (
  {cellContent, click, heightLight, heightLightStyle}:  
  {
    cellContent: string[] | number[],
    click: (index: number) => any,
    heightLight?: number[] | null,
    heightLightStyle?: object
  }
) => {
  let specs = Math.sqrt(cellContent.length); 
  heightLight = heightLight ? heightLight : [];
  heightLightStyle = heightLightStyle ? heightLightStyle : { backgroundColor: 'lightblue'};
  const renderSquare = (i:number) => {
    return <Square
    index = {i} 
    key = {i}
    value = {cellContent[i]}
    click = {() => click(i)}
    heightLight = {heightLight?.includes(i)}
    heightLightStyle = {heightLightStyle}
    />;
  }
  return (
    <div>
      {
        Array(specs).fill(null).map((item, i) => {
          return (
            <div className="board-row" key={i}>
              {
                Array(specs).fill(null).map((item, j) => renderSquare(specs*i + j))
              }
            </div>
          )
        })
      }
    </div>
  )
}
